<!--  -->
<template>
    <div class="common">
        <div class="netMoney border">
            <div class="title">
                <span :class="['item', currentType=='s2n'?'active':'']" @click.stop="changeType('s2n')">{{ list.s2n.name }}</span>
                <span :class="['item', currentType=='n2s'?'active':'']" @click.stop="changeType('n2s')">{{ list.n2s.name }}</span>
            </div>
            <div class="flex box">
                <div
                    class="flex grow column"
                    v-for="item in list[type].change"
                    :key="item.id"
                >
                    <div class="sub_title clear">
                        <span class="name">{{
                            list[type].child[item.type].name
                        }}</span>
                        <!-- <span
              class="direction"
              :class="['north', 'south'][list[type].child[item.type].direction]"
              >{{
                ["北向", "南向"][list[type].child[item.type].direction]
              }}</span
            > -->
                        <!-- <span class="time">日期：03-19</span> -->
                        <span class="more fr" @click="toLink(item.type)"
                            >成分股</span
                        >
                    </div>

                    <div class="flex grow presentation">
                        <div class="flex grow">
                            <div class="flex column grow">
                                <div class="flex grow netTotal">
                                    当日资金净流入[元]<span
                                        class="num"
                                        :class="item.color1"
                                        >{{ item.dayNetAmtIn }}</span
                                    >
                                </div>
                                <div class="flex grow range">
                                    板块涨跌幅<span
                                        class="num"
                                        :class="item.color2"
                                        >{{ item.blockChange }}</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="flex grow quota">
                            额度可用<span class="num">{{
                                item.dayAmtRemain
                            }}</span>
                        </div>
                    </div>
                    <div class="flex grow legend">
                        <div class="flex grow">
                            <div
                                class="flex column up"
                                :style="{ width: item.uPercent + '%' }"
                            >
                                <div class="flex grow name">涨</div>
                                <div class="flex grow">
                                    <div class="svg">{{ item.up }}</div>
                                </div>
                            </div>
                            <div
                                class="flex column flat"
                                :style="{ width: item.cPercent + '%' }"
                            >
                                <div class="flex grow name">平</div>
                                <div class="flex grow">
                                    <div class="svg">{{ item.chp }}</div>
                                </div>
                            </div>
                            <div
                                class="flex column sunk"
                                :style="{ width: item.dPercent + '%' }"
                            >
                                <div class="flex grow name">跌</div>
                                <div class="flex grow">
                                    <div class="svg">{{ item.down }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Chart
            class="border mt10"
            :dir="list[type].dir"
            :dataSource="list[type].trend"
        ></Chart>
        <div
            class="table border mt10"
            v-for="item in list[type].change"
            :key="item.id"
        >
            <div class="sub_title clear">
                <span class="name">{{ list[type].child[item.type].name }}</span>
                <span class="more fr" @click="toLink(item.type)">查看更多</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <td width="49px">序号</td>
                        <td>代码</td>
                        <td>名称</td>
                        <td>最新</td>
                        <td>涨跌</td>
                        <td>涨跌幅</td>
                        <td>成交量</td>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="(stock, i) in list[type].child[item.type].data"
                        :key="stock.id"
                    >
                        <td>{{ i + 1 }}</td>
                        <td class="orange">{{ stock.stockCode }}</td>
                        <td class="orange">{{ stock.stockName }}</td>
                        <td :class="stock.color">{{ stock.latest_price }}</td>
                        <td :class="stock.color">
                            {{ stock.px_change_balance }}
                        </td>
                        <td :class="stock.color">{{ stock.px_change_rate }}</td>
                        <td class="blue">{{ stock.business_amount }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { numberFormat } from "../script/utils";
import Chart from "./Chart";

export default {
    props: {
        type: {
            default: "",
            type: String,
        },
        currentType:{
            default: "",
            type: String,
        }
    },
    data() {
        return {
            list: {
                s2n: {
                    name: "北向资金",
                    dir: "n",
                    child: {
                        hk2sh: { name: "沪股通", direction: 0, data: [] },
                        hk2sz: { name: "深股通", direction: 0, data: [] },
                    },
                    change: [],
                    trend: [],
                },
                n2s: {
                    name: "南向资金",
                    dir: "s",
                    child: {
                        sh2hk: { name: "港股通(沪)", direction: 1, data: [] },
                        sz2hk: { name: "港股通(深)", direction: 1, data: [] },
                    },
                    change: [],
                    trend: [],
                },
            },
        };
    },
    computed: {
        ...mapState(["indexData"]),
    },
    components: { Chart },
    watch: {
        indexData:{
            handler(data,oldv){
                console.log(data)
                if (!data) return;
                let cur = this.list[this.type];
                let change = data.change.filter(
                    (item) => this.type && cur.child[item.type]
                );
                let stock = data.stock.filter(
                    (item) => this.type && cur.child[item.type]
                );
                let trend = data.trend.filter((item) => this.type && cur);
                cur.change = change
                    .map((item) => {
                        item.color1 = {
                            green: item.dayNetAmtIn < 0,
                            red: item.dayNetAmtIn > 0,
                        };
                        item.color2 = {
                            green: item.blockChange < 0,
                            red: item.blockChange > 0,
                        };
                        item.dayNetAmtIn = numberFormat(item.dayNetAmtIn * 10000);
                        item.dayAmtRemain = numberFormat(item.dayAmtRemain * 10000);
                        item.blockChange = item.blockChange / 100 + "%";
                        item.uPercent =
                            (item.up / (item.down + item.chp + item.up)) * 100;
                        item.dPercent =
                            (item.down / (item.down + item.chp + item.up)) * 100;
                        item.cPercent =
                            (item.chp / (item.down + item.chp + item.up)) * 100;
                        return item;
                    })
                    .sort((a, b) => a.id - b.id);
                stock.forEach((item) => {
                    item.color = {
                        red: item.px_change_rate > 0,
                        green: item.px_change_rate < 0,
                    };
                    item.px_change_rate = item.px_change_rate + "%";
                    item.business_amount = numberFormat(item.business_amount);
                    cur.child[item.type].data.push(item);
                });
                trend.forEach((item) => {
                    this.list[item.type].trend.push(item);
                });
            },
            //immediate: true,
            //deep: true,
            
        },
    },

    mounted() {},

    methods: {
        toLink(type) {
            this.$router.push({ name: "list", query: { type } });
        },
        changeType(type) {
            this.$emit("update:currentType", type);
        },
    },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";

.border {
    border: 2px solid $color;
    border-radius: 6px;
}
.mt10 {
    margin-top: 10px;
}
.common {
    padding: 0 10px 0 0;
    box-sizing: border-box;
    .title {
        padding: 5px 10px;
        background: $color;
        margin-bottom: 1px;
        .item {
            font-size: 16px;
            color: #cccccc;
            font-weight: 400;
            cursor: pointer;
            padding: 4px 8px;
            margin-right: 21px;
            display: inline-block;
        }
        .item.active {
            border-radius: 4px;
            background: #35497c;
            color: #fff
        }
    }
}
.netMoney {
    height: 221px;
    border-right: 1px solid $color;
    .box {
        padding-left: 1px;
        .sub_title {
            background: $color;
            height: 32px;
            overflow: hidden;
            margin-right: 1px;
            position: relative;
            .name {
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                padding-left: 12px;
                line-height: 32px;
            }
            .direction {
                display: inline-block;
                width: 33px;
                height: 18px;
                text-align: center;
                line-height: 18px;
                font-size: 12px;
                font-weight: 400;
                margin-left: 9px;
                &.north {
                    border: 1px solid #2c7eff;
                    color: #2c7eff;
                }
                &.south {
                    border: 1px solid #ff8a00;
                    color: #ff8a00;
                }
            }

            .more {
                line-height: 32px;
                font-size: 16px;
                color: #bcbfc4;
                font-weight: 400;
                margin-right: 13px;
                cursor: pointer;
                &:after {
                    content: "";
                    display: inline-block;
                    width: 8px;
                    height: 12px;
                    background: url($PIC_URL + "/tlbypcWeb/support/more.png")
                        no-repeat center;
                    margin-left: 5px;
                }
            }
        }
        .presentation {
            color: #ffffff;
            font-size: 16px;
            padding-top: 10px;
            line-height: 36px;
            border-right: 1px solid $color;
            .netTotal {
                justify-content: space-between;
                .num {
                    &.red {
                        color: #ea2827;
                    }
                    &.green {
                        color: #61c869;
                    }
                }
                padding: 0 13px;
            }
            .range {
                justify-content: space-between;
                .num {
                    &.red {
                        color: #ea2827;
                    }
                    &.green {
                        color: #61c869;
                    }
                }
                padding: 0 13px;
            }
            .quota {
                justify-content: space-between;
                .num {
                    color: #999999;
                }
                padding: 0 13px;
            }
        }
        .legend {
            padding: 0 13px 22px;
            border-right: 1px solid $color;
            .up {
                font-size: 16px;
                color: #ea2827;
                font-weight: 400;
                min-width: 39px;
                .name {
                    justify-content: center;
                    line-height: 32px;
                }
                .svg {
                    height: 18px;
                    width: 100%;
                    background: #ea2827;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 18px;
                    text-align: center;
                    shape-outside: polygon(
                        0px 0px,
                        0px 18px,
                        calc(100% - 10px) 18px,
                        100% 0
                    );
                    clip-path: polygon(
                        0px 0px,
                        0px 18px,
                        calc(100% - 10px) 18px,
                        100% 0
                    );
                }
            }
            .flat {
                font-size: 16px;
                color: #cccccc;
                font-weight: 400;
                min-width: 39px;
                .name {
                    justify-content: center;
                    line-height: 32px;
                }
                .svg {
                    height: 18px;
                    width: 100%;
                    background: #666666;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 18px;

                    text-align: center;
                    shape-outside: polygon(
                        10px 0px,
                        0px 18px,
                        calc(100% - 10px) 18px,
                        100% 0
                    );
                    clip-path: polygon(
                        10px 0px,
                        0px 18px,
                        calc(100% - 10px) 18px,
                        100% 0
                    );
                }
            }
            .sunk {
                font-size: 16px;
                color: #61c869;
                font-weight: 400;
                min-width: 39px;
                .name {
                    justify-content: center;
                    line-height: 32px;
                }
                .svg {
                    height: 18px;
                    width: 100%;
                    background: #61c869;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 18px;
                    text-align: center;
                    shape-outside: polygon(
                        10px 0px,
                        0px 18px,
                        100% 18px,
                        100% 0
                    );
                    clip-path: polygon(10px 0px, 0px 18px, 100% 18px, 100% 0);
                }
            }
        }
    }
}
.table {
    .sub_title {
        background: $color;
        height: 34px;
        overflow: hidden;
        //   margin-right: 1px;
        position: relative;
        .name {
            font-size: 16px;
            font-weight: 400;
            color: #fff;
            padding-left: 12px;
            line-height: 34px;
        }
        .more {
            line-height: 34px;
            font-size: 16px;
            color: #bcbfc4;
            font-weight: 400;
            margin-right: 13px;
            cursor: pointer;
            &:after {
                content: "";
                display: inline-block;
                width: 8px;
                height: 12px;
                background: url($PIC_URL + "/tlbypcWeb/support/more.png")
                    no-repeat center;
                margin-left: 5px;
            }
        }
    }
    table {
        width: 100%;
        text-align: center;
        table-layout: fixed;
        thead {
            background: $color;
            td {
                border: 1px solid #090910;
                font-size: 15px;
                color: #bcbfc4;
                line-height: 30px;
            }
        }
        tbody {
            tr {
                line-height: 28px;
                &:hover {
                    background: #2d3245;
                }
                td {
                    font-size: 16px;
                    color: #bcbfc4;
                    &.orange {
                        color: #f4f636;
                    }
                    &.blue {
                        color: #02e2f4;
                    }
                    &.green {
                        color: #61c869;
                    }
                    &.red {
                        color: #ea2827;
                    }
                }
            }
        }
    }
}
</style>
